import { Dialog } from 'vant';
<template>
  <!-- header -->
  <div class="header">
    <van-icon name="wap-home-o" style="margin: 0 10px" size="28px" @click="$router.push('/home')" />
    <span class="wangyi">网易严选</span>
    <van-icon name="search" style="margin: 0 10px" size="28px" @click="toSearch" />
    <van-icon name="cart-o" style="margin: 0 10px" size="28px" @click="goCart" />
  </div>
  <!-- logo -->
  <div class="body" v-show="ifshow === 1">
    <div class="image">
      <img src="https://yanxuan.nosdn.127.net/static-union/164793255107785e.png" alt="" />
    </div>
    <!-- 登录 -->
    <div class="login">
      <div class="phoneLogin">
        <van-icon name="user-o" color="#fff" size="20px" />
        <span @click="ifshow = 2">账号密码登录</span>
      </div>
      <div class="emalLogin">
        <van-icon name="envelop-o" color="#d32028" size="20px" />
        <span @click="dialog">邮箱账号登录</span>
      </div>
    </div>
    <div class="footer">
      <p>找回密码</p>
      <p>没有账号，<span @click="ifshow = 3">点击注册</span></p>
    </div>
  </div>
  <!-- 密码登录 -->
  <div class="passwordLogin" v-show="ifshow === 2">
    <div class="image">
      <img src="https://yanxuan.nosdn.127.net/static-union/164793255107785e.png" alt="" />
    </div>
    <van-form>
      <van-cell-group inset>
        <van-field name="用户名" v-model="userInfo.phone" label="用户名" placeholder="用户名" :rules="[{ pattern: /^1[3-578]\d{9}$/, message: '请填写正确的手机号' }]" />
        <van-field type="password" v-model="userInfo.password" name="密码" label="密码" placeholder="密码" :rules="[
            { pattern: /^[a-zA-Z0-9_]{6,12}$/, message: '密码长度应为6~12个字符' },
            {},
          ]" />
      </van-cell-group>
      <span class="xieyi">
        <input type="checkbox" v-model="ischeckbox" name="" id="man" />
        <a href="#javaScript"> 同意协议并注册《网易严选用户协议》 </a>
      </span>
      <div style="margin: 16px">
        <van-button round block type="primary" native-type="submit" @click="clicklogin" :disabled="!ischeckbox">
          登录
        </van-button>
      </div>
    </van-form>

    <div class="qita" @click="ifshow = 1">其他方式登录 ></div>
  </div>

  <!-- 注册 -->
  <div class="zhuce" v-show="ifshow === 3">
    <div class="title">注册</div>
    <van-form @submit="onSubmit">
      <van-cell-group inset>
        <van-field name="手机号" v-model="userInfo.phone" label="手机号" placeholder="手机号" :rules="[{ pattern: /^1[3-578]\d{9}$/, message: '请填写正确的手机号' }]" />
        <van-field type="password" v-model="userInfo.password" name="密码" label="密码" placeholder="密码" :rules="[
            { pattern: /^[a-zA-Z0-9_]{6,12}$/, message: '密码长度应为6~12个字符' },
          ]" />
        <van-field type="password" v-model="Repeapassword" name="密码" label="确认密码" placeholder="确认密码" :rules="[{ validator, message: '请输入正确内容' }]" />
        <van-field type="password" v-model="userInfo.code" name="密码" label="验证码" placeholder="请输入验证码" :rules="[{ required: true, message: '请输入验证码' }]">
          <template #button>
            <van-button size="small" type="primary" @click="getVerifyCode">获取验证码</van-button>
          </template>
        </van-field>
      </van-cell-group>
      <div style="margin: 16px">
        <van-button round block type="primary" native-type="submit"> 注册 </van-button>
      </div>
      <div class="mashang">
        <p>已有帐号？<span @click="ifshow = 2">马上登录</span></p>
      </div>
    </van-form>
  </div>
</template>

<script lang="ts">
export default {
  name: 'Login'
};
</script>

<script lang="ts" setup>
import { Dialog, Notify } from 'vant';
import { useRouter, useRoute } from 'vue-router';
import { ref } from 'vue';
import { default as LoginApi } from '@/api/login';
import { userInfoStore } from '@/store/userInfo';
const UserInfoStore = userInfoStore();
const route = useRoute();
const router = useRouter();
const path = ref();
interface userInfoData {
  phone: string;
  password: string;
  code: string;
}
const ifshow = ref(1);
function dialog() {
  Dialog.alert({
    message: '小哥正在努力开放中，敬请期待！！！'
  });
}
const ischeckbox = ref(false);
// 注册和登录的数据
const Repeapassword = ref('');
const userInfo = ref<userInfoData>({
  phone: '',
  password: '',
  code: ''
});
// 跳转到搜索页
const toSearch = () => {
  router.push('/search');
};
// 两次密码比较是否一样
const validator: any = (val: any) => {
  // console.log(userInfo.phone as string);
  // val是第二次输入的密码
  if (userInfo.value.password) {
    if (userInfo.value.password !== val) {
      return '两次密码不一致，请重新输入';
    }
  }
};
// 1、获取验证码
const getVerifyCode = async () => {
  if (userInfo.value.phone && userInfo.value.password && userInfo.value.password) {
    const result: any = await LoginApi.getCodeApi(userInfo.value.phone);
    setTimeout(() => {
      Notify({ type: 'primary', message: `您的验证码为：${result} `, duration: 5000 });
      userInfo.value.code = result;
      return result;
    }, 2000);
  }
};
// 2、用户注册
const onSubmit = async () => {
  try {
    const res: any = await LoginApi.userRegistrationApi(userInfo.value);
    // if (res.code == 223) {
    //   console.log("手机号已被注册");
    // }
    // console.log(res.message);
    // 清空表单里面的内容
    userInfo.value = {
      phone: '',
      password: '',
      code: ''
    };
    Repeapassword.value = '';

    ifshow.value = 2;
    return '成功';
  } catch (error) {
    Dialog.alert({
      message: '该用户可能已被注册，请重新注册',
      theme: 'round-button'
    })
      .then(() => {
        // on close
      })
      .catch(() => {
        // on cancel
      });
    return Promise.reject('用户可能已被注册');
  }
};
// 3、图标判断有没有token然后跳到购物车
const goCart = () => {
  if (localStorage.getItem('token')) {
    router.push('/cart');
  } else {
    Dialog.alert({
      message: '请先登录后才能看您的购物车哦！！！',
      theme: 'round-button'
    })
      .then(() => {
        // on close
      })
      .catch(() => {
        // on cancel
      });
  }
};
// 4、登录
const clicklogin = async () => {
  try {
    await UserInfoStore.SignIn(userInfo.value);
    const gopath = route.query.redirect as string;
    // router.push('/home')
    router.push(gopath || '/home');
  } catch (error) {
    Notify({ type: 'success', message: '账号密码不正确' });
  }
};
// // 4、登录
// const clicklogin = () => {
//   UserInfoStore.SignIn(userInfo.value);
//   console.log(route.query.redirect);
//   const gopath = route.query.redirect as string;
//   // router.push('/home')
//   router.push(gopath || "/home");
// };
</script>

<style lang="less" scoped>
.header {
  width: 375px;
  height: 44px;
  background-color: #fff;
  border-bottom: 1px solid #dedede;
  display: flex;
  align-items: center;
  .wangyi {
    padding-left: 50px;
    text-align: center;
    flex-grow: 1;
    font-weight: bold;
    font-size: 19px;
    color: #3a483d;
  }
}
.body {
  width: 375px;
  height: calc(100vh - 44px);
  background-color: #f2f5f4;
  .image {
    width: 375px;
    height: 125px;
    text-align: center;
    line-height: 125px;
    padding-top: 55px;
    img {
      width: 134px;
      height: 45px;
    }
  }
  .login {
    width: 375px;
    height: 160px;
    .phoneLogin {
      // display: flex;
      width: 330px;
      height: 47px;
      background-color: #dd1a21;
      margin: auto;
      border-radius: 20px;
      margin-bottom: 15px;
      font-size: 14px;
      color: #fff;
      text-align: center;
      line-height: 47px;
    }
    .emalLogin {
      width: 330px;
      height: 47px;
      margin: auto;
      border-radius: 20px;
      font-size: 14px;
      border: 2px solid #edc1c2;
      text-align: center;
      line-height: 47px;
      border-radius: 20px;
      .span {
        color: #dd1a21;
      }
    }
  }
}
.footer {
  margin-top: 200px;
  font-size: 14px;
  display: flex;
  justify-content: space-around;
  span {
    color: cornflowerblue;
  }
}

.passwordLogin {
  height: calc(100vh - 44px);
  background-color: #f2f5f4;
  .image {
    width: 375px;
    height: 125px;
    text-align: center;
    line-height: 125px;
    img {
      width: 134px;
      height: 45px;
    }
  }
  .qita {
    margin-top: 100px;
    font-size: 14px;
    text-align: center;
  }
  .xieyi {
    font-size: 12px;
    margin-left: 20px;
  }
}

.zhuce {
  width: 375px;
  display: flex;
  flex-direction: column;
  justify-content: right;
  align-content: center;
  .title {
    height: 80px;
    width: 330px;
    margin-left: 23px;
    line-height: 80px;
    border-bottom: 2px solid #f4f4f4;
    font-size: 18px;
    // text-align: center;
    margin-bottom: 20px;
    text-align: center;
    // display: flex;
  }
  .mashang {
    font-size: 14px;
    margin-left: 20px;
    span {
      color: #6495ed;
    }
  }
}
</style>
